<template>
    <div class="container">
        <div class="top">
            <div class="company-logo">智石</div>
            <div class="contact">
                <div class="iconfont icon-dianhua1"></div>
                <div class="contact-information">
                    <div>联系我们:</div>
                    <div>138-5324-8257</div>
                </div>
            </div>
        </div>
        <div class="middle">
            <div class="left-menu-bg" v-bind:style="menuFlag ? `width:${autoWidth(250)}` : `width:${autoWidth(100)}`">
                <div class="icon-menu" @click="menuFlag = !menuFlag">
                    <span class="iconfont icon-caidan cd1"></span>
                </div>
                <div class="first-menu" v-on:click="curPage = 1"><span class="iconfont icon-shouye menu-icons"></span>
                    <a v-if="menuFlag">首页</a>
                </div>
                <div class="first-menu" @click="curPage = 2"><span class="iconfont icon-guanyu menu-icons"></span>
                    <a v-if="menuFlag">关于智石</a>
                </div>

                <div class="first-menu" @click="curtIndex = curtIndex == 1 ? 0 : 1">
                    <span class="iconfont icon-chanpinzhanshi menu-icons"></span>
                    <a v-if="menuFlag">产品展示</a>
                    <span class="iconfont icon-shouqi1 sq1 " v-if="menuFlag"
                        v-bind:style="curtIndex == 1 ? ' ' : 'transform: rotate(180deg);'"></span>
                </div>
                <div class="second-menu" v-bind:style="curtIndex == 1 ? 'height:6.7vw' : 'height:0px'">
                    <div v-on:click="curPage = 3">BASF</div>
                    <div v-on:click="curPage = 3">Imerys</div>
                    <div v-on:click="curPage = 3">AMI</div>
                    <div v-on:click="curPage = 3">安琪酵母</div>
                    <div v-on:click="curPage = 3">凯恩斯</div>
                </div>
                <div class="first-menu" @click="mainMenuFlag = true; curPage = 4">
                    <span class="iconfont icon-hangyeyingyong menu-icons"></span>
                    <a v-if="menuFlag">行业应用</a>
                </div>
                <div class="first-menu" v-on:click="curPage = 5"><span class="iconfont icon-xinwen menu-icons"></span>
                    <a v-if="menuFlag">新闻资讯</a>
                </div>
                <div class="first-menu" v-on:click="curPage = 6"><span
                        class="iconfont icon-lianxiwomen menu-icons"></span>
                    <a v-if="menuFlag">联系我们</a>
                </div>
            </div>
            <div class="right-main-menu-bg">
                <mainMenu  v-if="curPage == 1"></mainMenu>
                <companyInform v-if="curPage == 2"></companyInform>
                <productList v-if="curPage==3"></productList>
            </div>
        </div>
        <div class="bottom">
            <div>© 2018 青岛智石贸易有限公司 版权所有</div>
            <div>鲁ICP18016801. All Rights Reserved. www.cnsmartstone.com com</div>
            <div>专业经营高端化工原料厂家，欢迎垂询!</div>
        </div>
    </div>


</template>
<style scoped lang="scss" src="./index-style.scss"></style>

<script setup lang="ts">

import { computed, onBeforeUpdate, onMounted, onUpdated, reactive, ref, watch } from 'vue';
import { debounce } from "../components/components1.vue";
import mainMenu from './mainMenu.vue';
import companyInform from './companyInform.vue';
import productList from './productList.vue';
let menuFlag = ref(true);
let mainMenuFlag = ref(true)
const chosenColor = "color: cyan;"
const unchosenColor = "color:white;"
let curtIndex = ref(0);
let curPage = ref(1);
let autoWidth = computed(() => {
    return (width: number) => {
        return `${width * 0.052}vw`
    }
})

onMounted(() => {

})







</script>
